<template>
	<template v-for="(item, index) in componentList" :key="item.id">
		<template v-if="!item.parentId || parentId">
			<edit-group v-if="item.isGroup" :groupData="item" :groupIndex="index"></edit-group>
			<edit-shape-box
				v-else
				:data-id="item.id"
				:index="index"
				:style="{
					...useComponentStyle(item.orgConfig.attr)
				}"
				:item="item"
				@click="mouseClickHandle($event, item)"
				@mousedown="mousedownHandle($event, item)"
				@mouseenter="mouseenterHandle($event, item)"
				@mouseleave="mouseleaveHandle($event, item)"
				@contextmenu="handleContextMenu($event, item, optionsHandle)"
			>
				<component
					class="edit-content-chart"
					:class="animationsClass(item.styles.animations)"
					:is="item.name"
					:config="item.orgConfig"
					:id="item.id"
					:style="{
						...useSizeStyle(item.orgConfig.attr),
						...getTransformStyle(item.styles)
					}"
				/>
			</edit-shape-box>
		</template>
	</template>
</template>

<script setup>
import { EditGroup } from './components/EditGroup';
import { EditShapeBox } from './components/EditShapeBox';
import { MenuEnum } from '@/enums/editPageEnum';
import { useMouseHandle } from './hooks/useDrag.hook';
import { handleContextMenu } from '@/views/chart/hooks/useContextMenu.hook';
import { useComponentStyle, useSizeStyle, animationsClass, getTransformStyle } from '@/utils';

const props = defineProps({
		parentId: {
			type: String,
			default: ''
		}
	}),
	componentList = computed(() => {
		if (props.parentId) return $store.chart.componentList.filter((item) => item.parentId === props.parentId);
		return $store.chart.componentList;
	});

// 点击事件
const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle();

// 右键事件
const optionsHandle = (targetList, allList, targetInstance) => {
	// 多选处理
	if ($store.chart.targetChart.selectId.length > 1) {
		return allList.filter((i) => [MenuEnum.GROUP, MenuEnum.DELETE].includes(i.key));
	}
	const statusMenuEnums = [];
	if (targetInstance.status.lock) {
		statusMenuEnums.push(MenuEnum.LOCK);
	} else {
		statusMenuEnums.push(MenuEnum.UNLOCK);
	}
	if (targetInstance.status.hide) {
		statusMenuEnums.push(MenuEnum.HIDE);
	} else {
		statusMenuEnums.push(MenuEnum.SHOW);
	}
	return targetList.filter((i) => !statusMenuEnums.includes(i.key));
};
</script>

<style lang="scss" scoped>
.edit-content-chart {
	position: absolute;
	overflow: hidden;
}
</style>
